<template>
  <div>
    <div class="page">
      <article class="container">
        <header class="header">
          <div class="deahtop">
            <a href="#">
              <i class="hl iconfont icon-zuojiantou"></i>
            </a>
            <div class="titl">
              <p>{{ goodsInfo.goodsname }}</p>
            </div>
            <a href="#">
              <i class="hr iconfont icon-shenglvehao"></i>
            </a>
          </div>
          <div class="deahnav">
            <ul>
              <li class="deactive">商品</li>
              <li>详情</li>
              <li>评价</li>
              <li>推荐</li>
            </ul>
          </div>
        </header>
        <article class="decon">
          <section class="deone">
            <div class="deoimg">
              <img :src="$pre + goodsInfo.img" alt="" />
            </div>
            <div class="deotext">
              <p>
                <span>
                  <i>&yen;{{ goodsInfo.price }}</i>
                  <i>&yen;{{ goodsInfo.market_price }}</i>
                </span>
                <span>
                  <i class="teshou iconfont icon-shoucang1"></i>
                  <i>收藏</i>
                </span>
              </p>
              <p>{{ goodsInfo.goodsname }}</p>
              <p>敏感肌可用，控油祛痘、男女可用、泡沫绵密、净透毛孔</p>
              <p>11.11限时299元起</p>
              <p>
                <span
                  >此商品于2020-11-11,00点结束闪购特卖，品牌美妆闪购专场</span
                >
                <a href="#">查看 > </a>
              </p>
            </div>
          </section>
          <section class="paih">
            <i class="jp iconfont icon-jiangpai"></i>
            <h5>排行榜</h5>
          </section>
          <section class="deoption">
            <table>
              <tr>
                <th>已选</th>
                <td class="clearfix">
                  <span>溪牧原山茶花洁面 x 1</span>
                  <a href="#" class="iconfont tab fr"> &#xe645; </a>
                </td>
              </tr>
              <tr>
                <th>分期</th>
                <td class="clearfix">
                  <span>可选3/6/12期</span>
                  <a href="#" class="iconfont tab fr"> &#xe645; </a>
                </td>
              </tr>
              <tr>
                <th>送至</th>
                <td class="clearfix">
                  <span>
                    <i class="tr3 iconfont icon-tubiaozhizuomoban-13"></i>
                    <span>北京市东城区</span>
                    <span>该地区暂时缺货</span>
                  </span>
                  <a href="#" class="iconfont tab fr"> &#xe645; </a>
                </td>
              </tr>
            </table>
            <div class="tu clearfix">
              <div class="gou">
                <div class="onego">
                  <i class="go iconfont icon-yixuan"></i>
                  <span>U商城自营</span>
                </div>
                <div class="onego">
                  <i class="go iconfont icon-yixuan"></i>
                  <span>U商城发货</span>
                </div>
                <div class="onego">
                  <i class="go iconfont icon-yixuan"></i>
                  <span>7天无理由退货</span>
                </div>
              </div>
              <a href="#" class="iconfont tab2"> &#xe645; </a>
            </div>
          </section>
          <section class="longimg" v-html="goodsInfo.description">
            <!-- <div class="infoImg" ref="oDiv"></div> -->
            <!-- <img src="../../assets/images/商品详情1.png" alt="">
                    <img src="../../assets/images/商品详情3.png" alt="">
                    <img src="../../assets/images/商品详情2.png" alt=""> -->
          </section>
          <section class="evaluate">
            <div class="evainner">
              <div class="evatitle">
                <h4>宝贝评价(698068)</h4>
                <a href="#">查看全部></a>
              </div>
              <div class="evatitle2">
                <a href="#">送人自用首选（2）</a>
                <a href="#">痘印变淡了（4）</a>
              </div>
              <ul class="evauserul">
                <li class="evauser">
                  <div class="evausermsg">
                    <div class="uesrimg">
                      <img src="../../assets/images/详情_头像.png" alt="" />
                    </div>
                    <div class="uesrname">
                      <h5>付*5</h5>
                      <time>3天前</time>
                    </div>
                  </div>
                  <div class="detext">
                    <p>
                      温和度：不紧绷，物流也很快便宜还不错，经常在这家
                      买，有点香味，保湿效果不错
                    </p>
                  </div>
                </li>
                <li class="evauser">
                  <div class="evausermsg">
                    <div class="uesrimg">
                      <img src="../../assets/images/详情_头像2.png" alt="" />
                    </div>
                    <div class="uesrname">
                      <h5>李*1</h5>
                      <time>6天前</time>
                    </div>
                  </div>
                  <div class="detext">
                    <p>
                      温和度：不紧绷，物流也很快便宜还不错，经常在这家
                      买，有点香味，保湿效果不错
                    </p>
                  </div>
                </li>
              </ul>
              <div class="evatitle">
                <h4>买家秀（737）</h4>
                <a href="#">查看全部></a>
              </div>
              <div class="maijimg">
                <img src="../../assets/images/图层14.png" alt="" />
                <img src="../../assets/images/图层19.png" alt="" />
                <img src="../../assets/images/图层17.png" alt="" />
                <img src="../../assets/images/图层20.png" alt="" />
              </div>
            </div>
          </section>
        </article>
      </article>
      <!-- 底部 -->
      <footer class="fotter2">
        <div class="foleft">
          <ul>
            <li>
              <a href="#">
                <img src="../../assets/images/hotline.png" alt="" />
                <p>客服</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="../../assets/images/store.png" alt="" />
                <p>店铺</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="../../assets/images/shoppingcart.png" alt="" />
                <p>购物车</p>
              </a>
            </li>
          </ul>
        </div>
        <div class="foright">
          <a href="#"  @click="add()" >加入购物车</a>
          <a href="#">立即购买</a>
        </div>
      </footer>
    </div>
  </div>
</template>
<script>
import { cartadd, getgoodsinfo} from '../../request/api.js'
 import { Toast } from 'vant';
export default {
data(){
return{
    goodsInfo:{},
    userInfo:sessionStorage.getItem("user")?JSON.parse(sessionStorage.getItem("user")):{}
}
},
methods: {
    add(){
        if(this.userInfo.uid){
            cartadd({
            uid:this.userInfo.uid,
            goodsid:this.goodsInfo.id,
            num:1
            }).then(res=>{
                if(res.data.code == 200){
                    Toast.success(res.data.msg);
                    this.$router.push("/dpage/cart")
                }else{
                    Toast.fail(res.data.msg)
                }
            })
        }else{
               Toast.fail("您还未登录，请先登录");
          this.$router.push("/sign")
        }
    }
},
components:{},
mounted() {
    getgoodsinfo({
        id:this.$route.query.id
    }).then(res=>{
        this.goodsInfo = res.data.list[0]
        // this.$refs.oDiv.innerHTML = this.goodsInfo.description
    })
},
destroyed() {},
}
</script>
<style scoped>
@import url(../../assets/css/public.css);
@import url(../../assets/css/product_details.css);
</style>